<!DOCTYPE html>
<html lang="zh_CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>测色觉小游戏</title>
  <style>
    body {
      background-color: skyblue;
      font-family: Arial, sans-serif;
    }

    h1 {
      text-align: center;
      margin: 10px 0;
    }

    .box {
      display: flex;
      width: 80vmin;
      height: 80vmin;
      margin: 0 auto;
      border: 2px solid red;
      flex-wrap: wrap;
    }

    .item {
      width: 20vmin;
      height: 20vmin;
      box-sizing: border-box;
      border: 2px solid white;
      cursor: pointer;
      transition: all 0.2s;
    }

    .item:hover {
      transform: scale(1.1);
    }

    .score-display {
      font-size: 24px;
      font-weight: bold;
    }
  </style>
</head>

<body>

  <h1>色觉挑战:</h1>
  <h1 class="s score-display">得分: 0</h1>
  <div class="box">

  </div>

  <script>
    let box = document.querySelector('.box');
    let nandu = 15; // 初始难度
    let score = 0;
    let items = [];

    // 创建16个方块
    for (let i = 0; i < 16; i++) {
      let item = document.createElement('div');
      item.className = 'item';
      items.push(item);
      box.appendChild(item);
      clickColor(item);
    }
    setColor(); // 初始化颜色
    function setColor() {
      // 生成随机基础颜色
      let r = Math.floor(Math.random() * 150 + 50);
      let g = Math.floor(Math.random() * 150 + 50);
      let b = Math.floor(Math.random() * 150 + 50);

      // 随机选择一个不同的方块（0-15，包含15）
      let targetIndex = Math.floor(Math.random() * 16);

      // 为每个方块设置颜色
      items.forEach((item, index) => {
        // 目标方块与其他方块有颜色差异
        if (index === targetIndex) {
          item.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
          item.index = true; // 标记为目标方块
        } else {
          // 其他方块颜色略有不同
          item.style.backgroundColor = `rgb(${r - nandu}, ${g - nandu}, ${b - nandu})`;
          item.index = false;
        }
      });
    }
    // 点击事件处理
    function clickColor(dom) {
      dom.addEventListener('click', function () {
        if (this.index) {
          // 点击正确
          score++;
          document.querySelector('.s').textContent = `得分: ${score}`;
          // 每得3分增加一次难度（颜色差异变小）
          if (score % 3 === 0 && nandu < 40) {
            nandu++;
          }
          if (score === 30) {
            score = 0;
            alert(`恭喜您,您的色觉超越了百分之99的人,游戏结束`)

          }
          setColor(); // 重新生成颜色
        } else {
          // 点击错误
          alert(`选错啦，您的得分为${score}`);
          // 重置游戏
          score = 0;
          nandu = 15;
          document.querySelector('.s').textContent = `得分: ${score}`;
          setColor();
        }
      });
    }
  </script>
</body>

</html>